<!--奖励设置-->
<template>
    <div class="edit-popup" style="width: 100%">
<!--        <popup-->
<!--            ref="popupRef"-->
<!--            title="点名奖励设置"-->
<!--            :async="true"-->
<!--            width="50vw"-->
<!--			:cancelButtonText="false"-->
<!--			:confirmButtonText="false"-->
<!--            @close="handleClose"-->
<!--        >-->
            <div class="popup-div">
				<div class="flex justify-end">
					<el-button type="primary" @click="handleAdd">添加</el-button>
				</div>
                <div class="table-div" style="overflow-y: auto">
					<el-tabs  class="demo-tabs">
					    <!-- 表格 -->
					    <el-table
					        size="large"
					        :data="pager.lists"
					        @selection-change="handleSelectionChange"
					    >
							<el-table-column label="点名次数" prop="layer" min-width="100" />
							<el-table-column label="奖励类型" prop="reward_type" min-width="100">
								<template #default="{ row }">
								    {{row.reward_type==1?'积分':row.reward_type==2?'优惠券':'鸡蛋'}}
								</template>
							</el-table-column>
							<el-table-column label="赠送数量" prop="number" min-width="100" />
					        <el-table-column label="赠送优惠券" prop="coupon_name" min-width="120" />
					        <el-table-column label="操作" min-width="160" fixed="right">
					            <template #default="{ row }">
					                <el-button
					                    type="primary"
					                    @click="handleEdte(row.id)" >
					                    编辑
					                </el-button>
					                <el-button
					                    type="warning"
					                    @click="handleunder(row.id)">
					                    删除
					                </el-button>

					            </template>
					        </el-table-column>
					    </el-table>
						<div class="flex justify-end mt-4">
						    <pagination v-model="pager" @change="getLists" />
						</div>
					</el-tabs>
                </div>

            </div>
<!--        </popup>-->
		<addPopup v-if="showAdd" ref="addRef" @success="getLists" @close="showAdd = false" />
    </div>
</template>
<script lang="ts" setup>
    import { usePaging } from '@/hooks/usePaging'
    import Popup from '@/components/popup/index.vue'
	import feedback from '@/utils/feedback'
	import { rollCallRewardRoomMzList,roomMzGoodsChoice,decRollCallRewardRoomMz} from '@/api/live'
	import addPopup from './add.vue'
    const emit = defineEmits(['success', 'close'])
    const popupRef = shallowRef<InstanceType<typeof Popup>>()

	const queryParams = reactive({
	    start_time: '',
		end_time:'',
		room_id:''
	});
	const { pager, getLists,resetPage} = usePaging({
	    fetchFun: rollCallRewardRoomMzList,
	    params: queryParams
	});
    // 打开弹窗
    const open = () => {
        popupRef.value?.open();
    };
	const ids = ref<any[]>([])
	const handleSelectionChange = (val: any[]) => {
	    ids.value = val.map((item) => {
	        return item.id
	    })
	}
    // 取消弹窗
    const handleClose = () => {
        emit('close', 0)
    };

	//删除奖励
	const handleunder = async (id: number) => {
	    await feedback.confirm(`确定要删除奖励`);
		await decRollCallRewardRoomMz({ roll_id:id});
	   getLists()
	};


	const addRef = shallowRef<InstanceType<typeof addPopup>>()
	const showAdd = ref(false)
	const handleAdd = async () => {
	    showAdd.value = true
	    await nextTick()
	    addRef.value?.open('add')
		addRef.value?.setID(queryParams.room_id);
	}

	const handleEdte = async (id:string) => {
	    showAdd.value = true
	    await nextTick()
	    addRef.value?.open('edit')
		addRef.value?.getDetail(queryParams.room_id, id);
	}

    const setFormData = (id:string) => {
        queryParams.room_id = id;
        getLists()
    };
    //提交


    defineExpose({
        open,
        setFormData
    });
</script>

<style lang="scss" scoped>
    .popup-div {
        height: 60vh;
        display: flex;
        flex-direction: column;
        .popup-div-title {
            position: sticky;
            top: 0;
            z-index: 999;
            background-color: #ffffff
        }
    }
</style>
